<template>
  <div class="comments">
    <el-row>
      <el-col :span="2" class="comment-img-col"
        ><img
          style="width: 35px"
          :src="avatar ? avatar : require('../assets/default_avatar.png')"
          class="comment-img"
      /></el-col>
      <el-col :span="22">
        <!-- <el-input
          :rows="2"
          type="textarea"
          placeholder="请输入评论"
          v-model="comment.content"
          
        >
        </el-input> -->
        <div class="comment-content">
          <mavon-editor
            class="article-box-content"
            placeholder="发布一条评论吧。"
            v-model="comment.content"
            :style="{ zIndex: 0 }"
            :toolbarsFlag="false"
            :subfield="false"
            :shortCut="false"
            ref="md"
            @save="submitComment"
            @click="checkLogin"
          />
        </div>
      </el-col>
    </el-row>
    <div style="text-align: right; margin: 10px 0">
      <el-button type="primary" @click="submitComment">提交</el-button>
    </div>

    <div class="comments-list">
      <div class="comments-title">评论列表</div>

      <div class="comments-item" v-for="item in comments" :key="item.id">
        <el-row>
          <el-col :span="2" class="comment-img-col"
            ><img style="width: 35px" :src="item.userDto.avatar"
          /></el-col>
          <el-col :span="22">
            <div class="comments-item-header">
              <span class="comments-item-header-left">{{
                item.userDto.uname
              }}</span>
              <span class="comments-item-header-right" v-if="item.top === 1"
                ><span>置顶</span></span
              >
            </div>
            <div class="comments-item-content">{{ item.content }}</div>
            <div class="comments-item-footer">
              <span class="comments-item-footer-left">{{ item.createAt }}</span>
              <span class="comments-item-footer-right">
                <el-link
                  icon="Pointer"
                  :underline="false"
                  @click="setBestAnswer(item.id)"
                  v-if="postCategory === 'FAQ' && showBtn"
                  >最佳答案</el-link
                >&nbsp;&nbsp;&nbsp;
                <el-link
                  icon="ChatLineRound"
                  :underline="false"
                  @click="reply(item.id, item.userDto.uname)"
                  >回复</el-link
                ></span
              >
            </div>
            <div class="comments-child">
              <div
                class="comments-child-item"
                v-for="child in item.childComments"
                :key="child.id"
              >
                <el-row>
                  <el-col :span="2" class="comment-img-col"
                    ><img style="width: 35px" :src="child.userDto.avatar"
                  /></el-col>
                  <el-col :span="22">
                    <div class="comments-child-header">
                      {{ child.userDto.uname + "回复:@" + child.target }}
                    </div>
                    <div class="comments-child-content">
                      {{ child.content }}
                    </div>
                    <div class="comments-child-footer">
                      <span class="comments-child-footer-left">{{
                        child.createAt
                      }}</span>
                      <span class="comments-child-footer-right"
                        ><el-link
                          icon="ChatLineRound"
                          :underline="false"
                          @click="reply(item.id, child.userDto.uname)"
                          >回复</el-link
                        ></span
                      >
                    </div>
                  </el-col>
                </el-row>
                <el-dialog
                  v-model="replyShowView"
                  :title="'回复:' + child.userDto.uname"
                  width="30%"
                >
                  <span
                    ><el-input
                      :rows="5"
                      type="textarea"
                      :placeholder="'回复:' + child.userDto.uname"
                      v-model="replyComment.content"
                      @click="checkLogin"
                    >
                    </el-input
                  ></span>
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button type="primary" @click="replySubmit()"
                        >回复</el-button
                      >
                      <el-button @click="replyShowView = false">
                        取消
                      </el-button>
                    </span>
                  </template>
                </el-dialog>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="reply">
          <el-dialog
            v-model="replyShowView"
            :title="'回复:' + item.userDto.uname"
            width="30%"
          >
            <span
              ><el-input
                :rows="5"
                type="textarea"
                :placeholder="'回复:' + item.userDto.uname"
                v-model="replyComment.content"
                @click="checkLogin"
              >
              </el-input
            ></span>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="replySubmit()"
                  >回复</el-button
                >
                <el-button @click="replyShowView = false"> 取消 </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>

    <el-divider />

    <div class="page">
      <el-pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total="totalNum"
        :page-sizes="[1, 2, 5, 10, 20, 30, 40, 50, 100]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        background
        layout="prev, pager, next"
      />
    </div>
  </div>
</template>
  
  <script>
// 导入通知消息框
import { ElNotification } from "element-plus";
import { $setBestAnswer } from "../api/article";
import { $postComment, $getComments } from "../api/comment";
import { checkLoginState } from "../common";
import { useUser } from "../store";
export default {
  props: {
    showBtn: Boolean,
  },
  watch: {
    // showBtn(newVal, oldVal) {
    //   // newVal是新值，oldVal是旧值
    //   this.showBtn = newVal;
    // },
  },
  data() {
    return {
      avatar: "",
      comment: {
        content: "",
        postsId: "",
      },
      comments: [],

      pageSize: 5,
      currentPage: 1,
      totalNum: 100,

      replyComment: {
        content: "",
        postsId: "",
        replyId: "",
        target: "",
      },
      replyShowView: false,

      postCategory: "faq",
    };
  },
  mounted() {
    this.handleCurrentChange(1);
  },
  methods: {
    //评论回复
    async reply(replyId, target) {
      if (!checkLoginState()) {
        return;
      }

      //封装回复数据
      let id = this.$route.query.id;
      this.replyComment.postsId = id;

      this.replyComment.replyId = replyId;
      this.replyComment.target = target;

      this.replyShowView = true;
    },

    //分页
    async handleCurrentChange(id) {
      // val: number
      console.log(`current page: ${id}`);
      let userStore = useUser();
      this.avatar = userStore.user.avatar;
      let currentId = this.$route.query.id;
      this.postCategory = this.$route.query.category;

      let { data } = await $getComments({
        page: id,
        pageSize: this.pageSize,
        postId: currentId,
      });
      this.comments = data.records;
      this.currentPage = id;
      this.totalNum = data.total;
    },
    async replySubmit() {
      let { data, code } = await $postComment(this.replyComment);
      if (code) {
        ElNotification({
          title: "通知",
          message: data,
          type: "success",
        });

        //关闭回复弹出框
        this.replyShowView = false;
        //重置数据
        this.replyComment = {};

        //触发刷新组件条件
        // this.componentKey += 1;
        // console.log(this.componentKey);
        this.handleCurrentChange(1);
      }
    },
    async loadData() {},
    checkLogin() {
      checkLoginState();
    },
    //提交评论
    async submitComment() {
      if (this.comment.content === "") {
        ElNotification({
          title: "通知",
          message: "评论不能为空",
          type: "info",
        });
        return;
      }

      let id = this.$route.query.id;
      this.comment.postsId = id;

      let { data, code } = await $postComment(this.comment);
      if (code) {
        ElNotification({
          title: "通知",
          message: data,
          type: "success",
        });

        //重置数据
        this.comment.content = "";

        //触发刷新组件条件
        // this.componentKey += 1;
        // console.log(this.componentKey);
        this.handleCurrentChange(1);
      }
    },
    async setBestAnswer(commentId) {
      let postId = this.$route.query.id;
      let { data, code } = await $setBestAnswer({
        id: postId,
        commentId: commentId,
      });
      if (code) {
        ElNotification({
          title: "通知",
          message: data,
          type: "success",
        });

        //刷新评论区数据
        this.handleCurrentChange(1);
      }
      if (!code) {
        ElNotification({
          title: "通知",
          message: data,
          type: "success",
        });
      }
    },
  },
};
</script>
  
  <style scoped lang="less">
.comments {
  .comment-img-col {
    width: 100%;
    position: relative;
  }
  .comment-img {
    max-width: 60%;
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%); /* 水平居中，垂直居中*/
    transform: translate(-50%, -50%); /* 水平居中，垂直居中*/
  }
  .comments-list {
    margin: 20px 0;
    .comments-title {
      margin: 10px 0;
      font-size: 24px;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
      text-align: left;
    }
    .comments-item {
      margin: 20px 0;
      text-align: left;
      .comments-item-header {
        color: #bfbfbf;
        .comments-item-header-left {
        }
        .comments-item-header-right {
          float: right;
          font-size: small;
          background-color: #409eff;
          color: #fff;
          padding: 3px 5px;
          border-radius: 25px;
        }
      }
      .comments-item-content {
        margin: 10px 0;
      }
      .comments-item-footer {
        margin: 10px 0;
        .comments-item-footer-left {
          font-size: small;
          color: #bfbfbf;
          float: left;
        }
        .comments-item-footer-right {
          float: right;
        }
      }
      .comments-child {
        margin-top: 35px;
        background: #fafbfc;
        border-bottom: 1px solid #ccc;
        .comments-child-item {
          margin: 10px 0;
          text-align: left;

          .comments-child-header {
            color: #bfbfbf;
          }
          .comments-child-content {
            margin: 10px 0;
          }
          .comments-child-footer {
            margin: 10px 0;
            .comments-child-footer-left {
              font-size: small;
              color: #bfbfbf;
              float: left;
            }
            .comments-child-footer-right {
              float: right;
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.article-box-content {
  width: 100%;
  height: calc(100% - 140px);
  min-height: 125px;
}
.comment-content {
  height: 125px;
}
</style>
